<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>题库管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }

        .toolbar {
            padding: 20px 30px;
            background: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .filter-section {
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }

        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .filter-group label {
            font-size: 0.9em;
            color: #666;
            font-weight: 500;
        }

        select, input {
            padding: 8px 12px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        select:focus, input:focus {
            outline: none;
            border-color: #4facfe;
        }

        .action-section {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
        }

        .btn-danger {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
            color: white;
        }

        .btn-success {
            background: linear-gradient(135deg, #51cf66 0%, #40c057 100%);
            color: white;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .stats {
            padding: 20px 30px;
            background: #f8f9fa;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #e9ecef;
        }

        .stat-item {
            text-align: center;
        }

        .stat-number {
            font-size: 2em;
            font-weight: bold;
            color: #4facfe;
        }

        .stat-label {
            color: #666;
            font-size: 0.9em;
        }

        .question-list {
            padding: 30px;
        }

        .question-item {
            border: 2px solid #e9ecef;
            border-radius: 12px;
            margin-bottom: 15px;
            transition: all 0.3s;
            background: white;
        }

        .question-item:hover {
            border-color: #4facfe;
            box-shadow: 0 5px 15px rgba(79, 172, 254, 0.1);
        }

        .question-item.selected {
            border-color: #4facfe;
            background: #f0f8ff;
        }

        .question-header {
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            cursor: pointer;
        }

        .question-checkbox {
            width: 20px;
            height: 20px;
            cursor: pointer;
        }

        .question-info {
            flex: 1;
            display: grid;
            grid-template-columns: auto 1fr auto auto;
            gap: 20px;
            align-items: center;
        }

        .question-id {
            background: #4facfe;
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.9em;
            font-weight: bold;
            min-width: 50px;
            text-align: center;
        }

        .question-content {
            flex: 1;
        }

        .question-title {
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
            line-height: 1.4;
        }

        .question-meta {
            display: flex;
            gap: 10px;
            font-size: 0.85em;
            color: #666;
        }

        .badge {
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 0.8em;
            font-weight: 500;
        }

        .badge-single {
            background: #e3f2fd;
            color: #1976d2;
        }

        .badge-multiple {
            background: #f3e5f5;
            color: #7b1fa2;
        }

        .badge-judge {
            background: #e8f5e8;
            color: #388e3c;
        }

        .badge-math {
            background: #fff3e0;
            color: #f57c00;
        }

        .badge-chinese {
            background: #fce4ec;
            color: #c2185b;
        }

        .badge-english {
            background: #e0f2f1;
            color: #00695c;
        }

        .badge-science {
            background: #f3e5f5;
            color: #512da8;
        }

        .question-actions {
            display: flex;
            gap: 10px;
        }

        .btn-small {
            padding: 5px 10px;
            font-size: 0.8em;
            border-radius: 6px;
        }

        .select-all-section {
            margin-bottom: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #666;
        }

        .empty-state img {
            width: 120px;
            opacity: 0.5;
            margin-bottom: 20px;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

        .modal-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 30px;
            border-radius: 15px;
            max-width: 500px;
            width: 90%;
            text-align: center;
        }

        .modal h3 {
            color: #333;
            margin-bottom: 15px;
        }

        .modal p {
            color: #666;
            margin-bottom: 25px;
            line-height: 1.5;
        }

        .modal-actions {
            display: flex;
            gap: 15px;
            justify-content: center;
        }

        @media (max-width: 768px) {
            .toolbar {
                flex-direction: column;
                align-items: stretch;
            }

            .filter-section {
                justify-content: center;
            }

            .action-section {
                justify-content: center;
            }

            .question-info {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .stats {
                flex-direction: column;
                gap: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>题库管理系统</h1>
            <p>高效管理和组织您的题目数据库</p>
        </div>

        <div class="toolbar">
            <div class="filter-section">
                <div class="filter-group">
                    <label for="subjectFilter">学科筛选</label>
                    <select id="subjectFilter">
                        <option value="">全部学科</option>
                        <option value="math">数学</option>
                        <option value="chinese">语文</option>
                        <option value="english">英语</option>
                        <option value="science">科学</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label for="typeFilter">题型筛选</label>
                    <select id="typeFilter">
                        <option value="">全部题型</option>
                        <option value="single">单选题</option>
                        <option value="multiple">多选题</option>
                        <option value="judge">判断题</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label for="searchInput">搜索题目</label>
                    <input type="text" id="searchInput" placeholder="输入关键词...">
                </div>
            </div>
            <div class="action-section">
                <a href="index.html" class="btn btn-primary">
                    ← 返回练习
                </a>
                <a href="excel_import.html" class="btn btn-success">
                    + 导入题目
                </a>
            </div>
        </div>

        <div class="stats">
            <div class="stat-item">
                <div class="stat-number" id="totalQuestions">0</div>
                <div class="stat-label">题目总数</div>
            </div>
            <div class="stat-item">
                <div class="stat-number" id="selectedCount">0</div>
                <div class="stat-label">已选择</div>
            </div>
            <div class="stat-item">
                <div class="stat-number" id="filteredCount">0</div>
                <div class="stat-label">筛选结果</div>
            </div>
        </div>

        <div class="question-list">
            <div class="select-all-section">
                <div>
                    <label>
                        <input type="checkbox" id="selectAllCheckbox"> 全选当前显示的题目
                    </label>
                </div>
                <div>
                    <button class="btn btn-danger" id="deleteSelectedBtn" disabled>
                        删除选中 (<span id="deleteCount">0</span>)
                    </button>
                </div>
            </div>

            <div id="questionContainer">
                <!-- Questions will be loaded here -->
            </div>

            <div id="emptyState" class="empty-state" style="display: none;">
                <h3>未找到题目</h3>
                <p>请尝试调整筛选条件或导入一些题目开始使用。</p>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div id="deleteModal" class="modal">
        <div class="modal-content">
            <h3>确认删除</h3>
            <p id="deleteMessage">您确定要删除选中的题目吗？此操作无法撤销。</p>
            <div class="modal-actions">
                <button class="btn btn-primary" id="cancelDelete">取消</button>
                <button class="btn btn-danger" id="confirmDelete">删除</button>
            </div>
        </div>
    </div>

    <script src="data.js"></script>
    <script>
        class QuestionManager {
            constructor() {
                this.questions = [...questionDatabase];
                this.filteredQuestions = [...this.questions];
                this.selectedQuestions = new Set();
                this.init();
            }

            init() {
                this.bindEvents();
                this.renderQuestions();
                this.updateStats();
            }

            bindEvents() {
                // Filter events
                document.getElementById('subjectFilter').addEventListener('change', () => this.applyFilters());
                document.getElementById('typeFilter').addEventListener('change', () => this.applyFilters());
                document.getElementById('searchInput').addEventListener('input', () => this.applyFilters());

                // Selection events
                document.getElementById('selectAllCheckbox').addEventListener('change', (e) => {
                    this.toggleSelectAll(e.target.checked);
                });

                // Delete events
                document.getElementById('deleteSelectedBtn').addEventListener('click', () => {
                    this.showDeleteModal();
                });

                document.getElementById('confirmDelete').addEventListener('click', () => {
                    this.deleteSelected();
                });

                document.getElementById('cancelDelete').addEventListener('click', () => {
                    this.hideDeleteModal();
                });

                // Modal close on background click
                document.getElementById('deleteModal').addEventListener('click', (e) => {
                    if (e.target.id === 'deleteModal') {
                        this.hideDeleteModal();
                    }
                });
            }

            applyFilters() {
                const subjectFilter = document.getElementById('subjectFilter').value;
                const typeFilter = document.getElementById('typeFilter').value;
                const searchTerm = document.getElementById('searchInput').value.toLowerCase();

                this.filteredQuestions = this.questions.filter(question => {
                    const matchesSubject = !subjectFilter || question.subject === subjectFilter;
                    const matchesType = !typeFilter || question.type === typeFilter;
                    const matchesSearch = !searchTerm || 
                        question.question.toLowerCase().includes(searchTerm) ||
                        question.explanation.toLowerCase().includes(searchTerm);

                    return matchesSubject && matchesType && matchesSearch;
                });

                this.selectedQuestions.clear();
                this.renderQuestions();
                this.updateStats();
                this.updateSelectAllCheckbox();
            }

            renderQuestions() {
                const container = document.getElementById('questionContainer');
                const emptyState = document.getElementById('emptyState');

                if (this.filteredQuestions.length === 0) {
                    container.style.display = 'none';
                    emptyState.style.display = 'block';
                    return;
                }

                container.style.display = 'block';
                emptyState.style.display = 'none';

                container.innerHTML = this.filteredQuestions.map(question => {
                    const isSelected = this.selectedQuestions.has(question.id);
                    return `
                        <div class="question-item ${isSelected ? 'selected' : ''}" data-id="${question.id}">
                            <div class="question-header" onclick="questionManager.toggleQuestion(${question.id})">
                                <input type="checkbox" class="question-checkbox" ${isSelected ? 'checked' : ''} 
                                       onclick="event.stopPropagation(); questionManager.toggleQuestion(${question.id})">
                                <div class="question-info">
                                    <div class="question-id">#${question.id}</div>
                                    <div class="question-content">
                                        <div class="question-title">${this.escapeHtml(question.question)}</div>
                                        <div class="question-meta">
                                            <span class="badge badge-${question.type}">${this.getTypeLabel(question.type)}</span>
                                            <span class="badge badge-${question.subject}">${this.getSubjectLabel(question.subject)}</span>
                                            <span>${question.options.length} 个选项</span>
                                        </div>
                                    </div>
                                    <div class="question-actions">
                                        <button class="btn btn-danger btn-small" onclick="event.stopPropagation(); questionManager.deleteQuestion(${question.id})">
                                            删除
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                }).join('');
            }

            toggleQuestion(questionId) {
                if (this.selectedQuestions.has(questionId)) {
                    this.selectedQuestions.delete(questionId);
                } else {
                    this.selectedQuestions.add(questionId);
                }
                this.renderQuestions();
                this.updateStats();
                this.updateSelectAllCheckbox();
            }

            toggleSelectAll(selectAll) {
                if (selectAll) {
                    this.filteredQuestions.forEach(question => {
                        this.selectedQuestions.add(question.id);
                    });
                } else {
                    this.filteredQuestions.forEach(question => {
                        this.selectedQuestions.delete(question.id);
                    });
                }
                this.renderQuestions();
                this.updateStats();
            }

            updateSelectAllCheckbox() {
                const selectAllCheckbox = document.getElementById('selectAllCheckbox');
                const visibleIds = this.filteredQuestions.map(q => q.id);
                const selectedVisibleCount = visibleIds.filter(id => this.selectedQuestions.has(id)).length;
                
                if (selectedVisibleCount === 0) {
                    selectAllCheckbox.checked = false;
                    selectAllCheckbox.indeterminate = false;
                } else if (selectedVisibleCount === visibleIds.length) {
                    selectAllCheckbox.checked = true;
                    selectAllCheckbox.indeterminate = false;
                } else {
                    selectAllCheckbox.checked = false;
                    selectAllCheckbox.indeterminate = true;
                }
            }

            updateStats() {
                document.getElementById('totalQuestions').textContent = this.questions.length;
                document.getElementById('selectedCount').textContent = this.selectedQuestions.size;
                document.getElementById('filteredCount').textContent = this.filteredQuestions.length;
                document.getElementById('deleteCount').textContent = this.selectedQuestions.size;

                const deleteBtn = document.getElementById('deleteSelectedBtn');
                deleteBtn.disabled = this.selectedQuestions.size === 0;
            }

            showDeleteModal() {
                const count = this.selectedQuestions.size;
                const message = count === 1 
                    ? '您确定要删除 1 道题目吗？此操作无法撤销。'
                    : `您确定要删除 ${count} 道题目吗？此操作无法撤销。`;
                
                document.getElementById('deleteMessage').textContent = message;
                document.getElementById('deleteModal').style.display = 'block';
            }

            hideDeleteModal() {
                document.getElementById('deleteModal').style.display = 'none';
            }

            deleteQuestion(questionId) {
                this.selectedQuestions.clear();
                this.selectedQuestions.add(questionId);
                this.showDeleteModal();
            }

            deleteSelected() {
                const idsToDelete = Array.from(this.selectedQuestions);
                
                // Remove questions from the array
                this.questions = this.questions.filter(question => !idsToDelete.includes(question.id));
                
                // Update the global questionDatabase
                questionDatabase.length = 0;
                questionDatabase.push(...this.questions);
                
                // Clear selection and update display
                this.selectedQuestions.clear();
                this.applyFilters();
                this.hideDeleteModal();
                
                // Generate updated data.js content
                this.generateUpdatedDataFile();
                
                // Show success message
                this.showSuccessMessage(`成功删除 ${idsToDelete.length} 道题目`);
            }

            generateUpdatedDataFile() {
                const dataContent = this.generateDataFileContent();
                
                // Create download link
                const blob = new Blob([dataContent], { type: 'text/javascript' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = 'data.js';
                a.style.display = 'none';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            }

            generateDataFileContent() {
                const questionsStr = JSON.stringify(this.questions, null, 4)
                    .replace(/"([^"]+)":/g, '$1:')
                    .replace(/"/g, "'");

                return `// Question database
const questionDatabase = ${questionsStr};

// Export for use in other files
if (typeof module !== 'undefined' && module.exports) {
    module.exports = questionDatabase;
}`;
            }

            showSuccessMessage(message) {
                const successDiv = document.createElement('div');
                successDiv.style.cssText = `
                    position: fixed;
                    top: 20px;
                    right: 20px;
                    background: #51cf66;
                    color: white;
                    padding: 15px 25px;
                    border-radius: 8px;
                    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
                    z-index: 1001;
                    font-weight: 500;
                `;
                successDiv.textContent = message;
                document.body.appendChild(successDiv);

                setTimeout(() => {
                    successDiv.remove();
                }, 3000);
            }

            getTypeLabel(type) {
                const labels = {
                    'single': '单选题',
                    'multiple': '多选题',
                    'judge': '判断题'
                };
                return labels[type] || type;
            }

            getSubjectLabel(subject) {
                const labels = {
                    'math': '数学',
                    'chinese': '语文',
                    'english': '英语',
                    'science': '科学'
                };
                return labels[subject] || subject;
            }

            escapeHtml(text) {
                const div = document.createElement('div');
                div.textContent = text;
                return div.innerHTML;
            }
        }

        // Initialize the question manager
        const questionManager = new QuestionManager();
    </script>
</body>
</html>